-@title= 'From | Admin Page '
-@page_classes= 'form'

.container
  .col-5.mb-10
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-align-justify
        .panel-title.panel-with-icon
          Simple Form
      .panel-body
        %form
          .form-group
            %label Email address
            %input.easyui-textbox{'data-options':"prompt:'Email', width:410, height:34, iconCls:'fa fa-user', iconWidth:38", type: 'text'}
          .form-group
            %label Password
            %input.easyui-textbox{'data-options':"prompt:'Password', width:410, height:34, iconCls:'fa fa-lock', iconWidth:38", type: 'password'}
          .checkbox
            %label
              %input.easyui-checkbox{type: 'checkbox'}
              Check me out (checkbox button)
          %button.easyui-linkbutton.l-btn-success{type: 'submit'} Submit
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-code
        %h3.panel-title.panel-with-icon
          Simple Form | Source Code
      .panel-body
        :code
          # lang: html
          <form>
            <div class="form-group">
              <label>
                Email address
              </label>
              <input class="easyui-textbox" data-options="prompt:'Email', width:410, height:34, iconCls:'fa fa-user', iconWidth:38" type="text" />
            </div>
            <div class="form-group">
              <label>
                Password
              </label>
              <input class="easyui-textbox" data-options="prompt:'Password', width:410, height:34, iconCls:'fa fa-user', iconWidth:38" type="password" />
            </div>
            <div class="checkbox">
              <label>
                <input class="easyui-checkbox" type="checkbox" />
                Check me out (checkbox button)
              </label>
            </div>
            <button class="easyui-linkbutton l-btn-success" type="submit">
              Submit
            </button>
          </form>
  %hr.col-12
  .col-6
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-align-justify
        .panel-title.panel-with-icon
          Horizontal Form
      .panel-body
        %form.form-horizontal
          .form-group
            %label.col-2.control-label Email
            .col-10.col-last
              %input.easyui-textbox{'data-options':"prompt:'Email', width:250, height:34, iconCls:'fa fa-user', iconWidth:38", type: 'text'}
          .form-group
            %label.col-2.control-label Password
            .col-10.col-last
              %input.easyui-textbox{'data-options':"prompt:'Password', width:250, height:34, iconCls:'fa fa-lock', iconWidth:38", type: 'password'}
          .form-group
            .col-push-2.col-10
              .checkbox
                %label
                  %input.easyui-radio{type: 'radio'}
                  Remember me (radio button)
          .form-group
            .col-push-2.col-10
              %button.easyui-linkbutton.l-btn-primary{type: 'submit'} Sign in
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-code
        %h3.panel-title.panel-with-icon
          Horizontal Form | Source Code
      .panel-body
        :code
          # lang: html
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-2 control-label ">
                Email address
              </label>
              <div class="col-10 col-last">
                <input class="easyui-textbox" data-options="prompt:'Email', width:250, height:34, iconCls:'fa fa-user', iconWidth:38" type="text" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-2 control-label ">
                Password
              </label>
              <div class="col-10 col-last">
                <input class="easyui-textbox" data-options="prompt:'Password', width:250, height:34, iconCls:'fa fa-user', iconWidth:38" type="password" />
              </div>
            </div>
            <div class="form-group">
              <div class="col-push-2 col-10">
                <div class="radio">
                  <label>
                    <input class="easyui-radio" type="radio" />
                    Remember me (radio button)
                  </label>
                </div>
              </div>
            <div class="form-group">
              <div class="col-push-2 col-10">
                <button class="easyui-linkbutton l-btn-success" type="submit">
                  Submit
                </button>
              </div>
          </form>
  %hr.col-12
  .col-8
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-align-justify
        .panel-title.panel-with-icon
          From Inline
      .panel-body
        %form.form-inline
          .form-group
            %label Email address
            %input.easyui-textbox{'data-options':"prompt:'Email', width:200, height:34, iconCls:'fa fa-user', iconWidth:38", type: 'text'}
          .form-group
            %label Password
            %input.easyui-textbox{'data-options':"prompt:'Password', width:200, height:34, iconCls:'fa fa-lock', iconWidth:38", type: 'password'}
          %button.easyui-linkbutton.l-btn-primary{type: 'submit'} Submit
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-code
        %h3.panel-title.panel-with-icon
          From Inline | Source Code
      .panel-body
        :code
          # lang: html
          <form class="form-inline">
            <div class="form-group">
              <label>
                Email address
              </label>
              <input class="easyui-textbox" data-options="prompt:'Email', width:200, height:34, iconCls:'fa fa-user', iconWidth:38" type="text" />
            </div>
            <div class="form-group">
              <label>
                Password
              </label>
              <input class="easyui-textbox" data-options="prompt:'Password', width:200, height:34, iconCls:'fa fa-user', iconWidth:38" type="password" />
            </div>
            <button class="easyui-linkbutton l-btn-success" type="submit">
              Submit
            </button>
          </form>
  %hr.col-12
  .col-4
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-search
        .panel-title.panel-with-icon
          From Inline with by button
      .panel-body
        %input.easyui-textbox{'data-options':"buttonText:'Search', buttonIcon:'fa fa-search', prompt:'Search...', width:320, height:34", type:'text'}
  .col-8.col-last
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-code
        %h3.panel-title.panel-with-icon
          From Inline with by button | Source Code
      .panel-body
        :code
          # lang: html
          <input class="easyui-textbox" data-options="buttonText:'Search', buttonIcon:'fa fa-search', prompt:'Search...', width:320, height:34" type="text" />
  %hr.col-12
  .col-6
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-align-justify
        .panel-title.panel-with-icon
          Validate Form on Submit
      .panel-body
        %form.easyui-form#ff{'data-options':'novalidate:true', method: 'post'}
          .form-group
            %label Name:
            %input.easyui-textbox{'data-options':'required:true, width:480, height:34', name: 'name', type: 'text'}
          .form-group
            %label Email:
            %input.easyui-textbox{'data-options':"required:true, width:480, height:34, validType:'email'", name: 'email', type: 'text'}
          .form-group
            %label Subject:
            %input.easyui-textbox{'data-options':'required:true, width:480, height:34', name: 'subject', type: 'text'}
          .form-group
            %label Message:
            %input.easyui-textbox{'data-options':'multiline:true, width:480, height:60', name: 'message', type:'text'}
          .form-group
            %button.easyui-linkbutton.l-btn-primary{onclick: 'submitForm()', type: 'submit'} Submit
            %button.easyui-linkbutton.l-btn-danger{onclick: 'clearForm()', type: 'submit'} Clear
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-code
        %h3.panel-title.panel-with-icon
          Validate Form on Submit  | Source Code
      .panel-body
        :code
          # lang: html
          //#####
          // HTML
          //################################

          <form class="easyui-form" id="ff" data-options="novalidate:true" method="post">
            <div class="form-group">
              <label>
                Name:
              </label>
              <input class="easyui-textbox" data-options="required:true, width:480, height:34" name="name" type="text" />
            </div>
            <div class="form-group">
              <label>
                Password:
              </label>
              <input class="easyui-textbox" data-options="required:true, width:480, height:34, validType:'email'" name="email" type="text" />
            </div>
            <div class="form-group">
              <label>
                Subject:
              </label>
              <input class="easyui-textbox" data-options="required:true, width:480, height:34" name="subject" type="text" />
            </div>
            <div class="form-group">
              <label>
                Message:
              </label>
              <input class="easyui-textbox" data-options="multiline:true, width:480, height:60" name="message" type="text" />
            </div>
            <div class="form-group">
              <button class="easyui-linkbutton l-btn-success" onclick="submitForm()" type="submit">
                Submit
              </button>
              <button class="easyui-linkbutton l-btn-danger" onclick="clearForm()" type="submit">
                Clear
              </button>
            </div>
          </form>
        :code
          # lang: js
          //#####
          // Javascript
          //################################

          function submitForm(){
            $('#ff').form('submit',{
              onSubmit:function(){
                return $(this).form('enableValidation').form('validate');
              }
            });
          }
          function clearForm(){
            $('#ff').form('clear');
          }
  %hr.col-12
  .col-6
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-align-justify
        .panel-title.panel-with-icon
          Number Spinner
      .panel-body
        %input.easyui-numberspinner{'data-options':"\n onChange: function(value){\n $('#vv').text(value);\n}\n", type:'text'}
        %small Value:
        %small#vv
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-code
        %h3.panel-title.panel-with-icon
          Number Spinner | Source Code
      .panel-body
        :code
          # lang: html
          <input class="easyui-numberspinner" data-options="\n onChange: function(value){\n $('#vv').text(value);\n}\n" type="text" />
          <small> Value: </small>
          <small id="vv"> </small>

:javascript
  //Validate Form on Submit
  function submitForm(){
    $('#ff').form('submit',{
        onSubmit:function(){
            return $(this).form('enableValidation').form('validate');
        }
    });
  }
  function clearForm(){
    $('#ff').form('clear');
  }
